<script lang="ts">
import BavButton from '../components/BavButton.vue'
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { getVill, getConts, getNavig, getAgge } from '../api/conts'

import { onMounted, ref, onUnmounted } from 'vue'
export default defineComponent({
  components: {
    BavButton
  },

  setup() {
    //写一个数组
    const classifyList: any = ref<Array<any>>([
      {
        name: '综合',
        id: 1,
        order_by: 'comprehensive',
        conFlag: true
      },
      {
        name: '新上市',
        id: 2,
        order_by: 'online_time',
        conFlag: false
      },
      {
        name: '畅销',
        id: 3,
        order_by: 'sold_num',
        conFlag: false
      },
      {
        name: '价格',
        id: 4,
        order_by: '-price',
        conFlag: false
      }
    ])

    //导航栏   getNavig
    var nav: any = ref<Array<any>>([])
    const navig = (goods_id: any) => {
      var id = goods_id
      getNavig(id).then((data: any) => {
        console.log(data)
        AggreList.value = data.data.list

        //点击高亮
        let index = classifyList.value.findIndex((item: any) => {
          return item.order_by == id
        })

        console.log(index)
        classifyList.value.forEach((item: any) => {
          item.conFlag = false
        })
        classifyList.value[index].conFlag = true
      })
    }

    let show: any = ref(false)

    // 大别墅商品列表
    // getVill
    var Vill: any = ref<Array<any>>([])
    const getVillFun = () => {
      getVill().then((data: any) => {
        // console.log(data);
        Vill.value = data.data.list
      })
    }
    //全部分类
    var Agge: any = ref<Array<any>>([])
    const getAggeFun = () => {
      getAgge().then((data: any) => {
        console.log(data)
        Agge.value = data.data.list
      })
    }
    //  数码
    var AggreList: any = ref<Array<any>>()
    const Aggre = (id: any) => {
      var aid = id
      getConts(aid).then((data: any) => {
        console.log(data)
        AggreList.value = data.data.list

        show.value = false //点击退出
      })
    }

    // 跳转路由
    const goPage = (path: any, goods_id: any) => {
      console.log(goods_id)

      router.push({
        path,
        query: {
          goods_id // 商品id
        }
      })
    }

    const detailHander = (path: any, goods_id: any) => {
      router.push({
        path,
        query: {
          goods_id
        }
      })
    }

    const goSearch = (path: any) => {
      router.push({
        path
      })
    }

    const goHome = (path: any) => {
      router.push({
        path
      })
    }

    // 返回顶部按钮

    const backTopFlag = ref(false) //用来判断样式
    const backTop = () => {
      let top = document.documentElement.scrollTop //获取点击时页面的滚动条纵坐标位置
      const timeTop = setInterval(() => {
        document.documentElement.scrollTop = top -= 50 //一次减50往上滑动
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 5) //定时调用函数使其更顺滑
    }
    const handleScroll = () => {
      if (document.documentElement.scrollTop > 20) {
        backTopFlag.value = true
      } else {
        backTopFlag.value = false
      }
      //往下滑超过20则显示 否则则不显示按钮
    }

    onMounted(() => {
      getVillFun() //商品列表
      getAggeFun() //全部分类
      window.addEventListener('scroll', handleScroll) //监听滚动事件
    })

    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll) //离开页面时移除监听事件
    })

    let router: any = useRouter()
    return {
      Vill,
      show,
      Agge, //全部分类
      goPage, //跳转路由
      Aggre,
      AggreList,
      classifyList,
      nav,
      navig,
      detailHander,
      goSearch,
      goHome,
      backTopFlag,
      backTop
    }
  }
})
</script>

<template>
  <div class="toplis">
    <!-- 吸顶 -->
    <van-sticky :offset-top="0">
      <!-- 顶部搜索框 -->
      <div class="mhy-no">
        <div class="rile" @click="goHome('/')"><span class="iconfont icon-zuojian"></span></div>
        <div class="no" @click="goSearch('/search')">
          <div class="iconfont icon-sousuo">
            <span class="xu">须弥</span>
          </div>
        </div>

        <div class="leftl">
          <div class="tle"><span class="iconfont icon-sangedian"></span></div>
        </div>
      </div>

      <!-- 分类 -->
      <div class="list">
        <div
          :class="['goods', { con: item.conFlag }]"
          v-for="item in classifyList"
          :key="item.id"
          @click="navig(item.order_by)"
        >
          {{ item.name }}
        </div>

        <div class="good" @click="show = true"><span class="iconfont icon-fenlei"></span> 分类</div>

        <van-action-sheet position="top" v-model:show="show">
          <div class="content">
            <div class="all">
              <div class="al">全部分类</div>
              <div class="aill">
                <span class="iconfont icon-youjiantou"></span>
              </div>
            </div>

            <!-- 全部分类图标样式 -->
            <div class="top" v-for="item in Agge" :key="item.id">
              <div class="top-no">
                <div>
                  <!-- 角色-旅行征程 -->
                  {{ item.name }}
                </div>

                <span class="iconfont icon-youjiantou"></span>
              </div>
              <div class="icon">
                <ul>
                  <li v-for="i in item.child" :key="i.id" @click="Aggre(i.id)">{{ i.name }}</li>
                </ul>
              </div>
            </div>
          </div>
        </van-action-sheet>
      </div>
    </van-sticky>
    <div class="loading">
      <ul>
        <li
          v-for="item in AggreList || Vill"
          :key="item.goods_id"
          @click="detailHander('/detail', item.goods_id)"
        >
          <div class="card__title">
            <!-- <img src="../assets/img/11.jpg" alt=""> -->
            <img :src="item.cover_url" alt="" v-lazy="item.cover_url" />
          </div>
          <h5 class="lis">
            <span class="tss">
              <!-- <img src="../assets/img/12.jpg" alt=""> -->
            </span>
            <span class="card">
              <!-- 【原神】风花的呼吸主题系列 收藏卡 Genshin -->
              {{ item.name }}
            </span>
          </h5>
          <div class="rd">
            <span class="let-1">¥</span>
            <span class="let-2">
              {{ (item.market_price / 100).toFixed(2) }}
            </span>
            <!-- <span class="let-3">.00</span> -->
          </div>
        </li>
      </ul>
    </div>

    <!-- 返回顶部 -->
    <div :class="backTopFlag ? 'active' : 'inactive'" @click="backTop">
      <i class="iconfont icon-shangjiantou"></i>
    </div>

    <BavButton :active="1" />
  </div>
</template>

<style lang="scss" scoped>
@import url(../../src/assets/font01/iconfont.css);
// *{
//     box-sizing: border-box;
// }

.active {
  position: fixed;
  right: 20px;
  bottom: 110px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.95);
  animation: active 1s;
  -webkit-animation: active 1s;
  overflow: hidden;
  i {
    font-size: 12px;
    color: rgb(197, 197, 203);
  }
}
@keyframes active {
  0% {
    height: 0px;
  }

  100% {
    height: 40px;
  }
}
.inactive {
  position: fixed;
  right: 20px;
  bottom: 110px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  animation: inactive 1s;
  -webkit-animation: inactive 1s;
  animation-fill-mode: forwards;
  overflow: hidden;
  i {
    font-size: 12px;
    color: rgb(197, 197, 203);
  }
}

@keyframes inactive {
  0% {
    height: 40px;
  }

  100% {
    height: 0px;
  }
}

.toplis {
  width: 100%;
  height: 700px;
  background-color: #f3f3f4;
}
.mhy-no {
  /* height: 85px; */
  background-color: #ffffff;
  display: flex;

  width: 100%;
}
.no {
  height: 34px;
  background-color: #f9f9f9;
  margin-left: 17px;
  width: 80%;
  margin-top: 5px;
  border-radius: 14px;
  padding-right: 50px;
  display: flex;
}

.leftl {
  height: 32px;
  background-color: #ffffff;
  border: 1px solid #f6f6f6;
  width: 15%;
  margin-right: 10px;
  margin-left: 5px;
  margin-top: 6px;
  border-radius: 20px;
  margin-right: 5px;
}

.no .iconfont {
  line-height: 35px;
  padding-left: 10px;
  color: #9696a1;
}

.no .xu {
  font-size: 14px;
  margin-left: 2px;
  color: #e8e8e9;
}

.leftl .iconfont {
  padding-left: 2px;
}

.leftl .tle {
  height: 22px;
  width: 22px;
  margin: 0 auto;
  /* background-color: beige; */
  padding-top: 8px;
}

.rile {
  /* height: 20px;
    margin-top: 10px; */
  /* background-color: red; */
  width: 10%;
  margin-left: 10px;
}

.rile .iconfont {
  line-height: 43px;
  padding-left: 5px;
}

.list {
  // height: 37px;
  background-color: #ffffff;
  display: flex;
}

.goods {
  margin: 0 10px;
  line-height: 37px;
  &.con {
    color: orange;
  }
}

//商品
.loading {
  margin: 0 18px;

  /* height: 700px; */
  /* background-color: orange; */
  display: flex;
}

.loading ul {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}

.loading li {
  width: 48%;
  height: 230px;
  background-color: #ffffff;
  margin-top: 10px;
  border-radius: 8px;
}

/* .card__title{
   height: 145px; 
    background-color: firebrick; 
  } */
.card__title img {
  border-radius: 8px;
  width: 100%;
}

.loading .lis {
  font-size: 15px;
  font-weight: 500;
  color: #2d2d49;
  line-height: 18px;
  margin: 0 10px;
  overflow: hidden;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* height: 36px; */
  /* background-color: khaki; */
}

.loading .card {
  font-size: 8px;
}

.tss {
  // width: 35px;
  /* height: 15px; */

  vertical-align: bottom;
}

.tss img {
  width: 100%;
}

.rd {
  height: 17px;
  /* background-color: blueviolet; */
  margin: 0 10px;
  margin-top: 5px;
  display: flex;
}

.rd .let-1 {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}

.rd .let-2 {
  font-size: 12px;
  font-weight: 700;
  font-family: 'Fira Sans Black Italic';
  font-style: italic;
}

.goods {
  margin: 0 10px;
  line-height: 37px;
}

.list .good {
  line-height: 37px;
  margin-left: 120px;
}
.content {
  padding: 16px 16px 18px;
}
.all {
  height: 45px;
  /* background-color: red; */
  justify-content: space-between;
  display: flex;
  border-bottom: 1px solid #eff1f4;
}

.aill .iconfont {
  line-height: 44px;
}

.al {
  line-height: 44px;
}

.top {
  padding-top: 9px;
  height: auto;

  /* background-color: red; */
  border-bottom: 1px solid #eff1f4;

  /* padding-top: 10px; */
  padding-bottom: 12px;
}

.top-no {
  display: flex;
  justify-content: space-between;
}

.icon {
  padding-top: 5px;
}

.icon ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.icon li {
  height: 33px;
  background-color: #f3f3f4;
  width: 45%;
  border-radius: 7px;
  line-height: 33px;
  padding-left: 7px;
  margin-top: 10px;
}
</style>
